<template>
	<view class="integral-detail-wrapper">
		<!-- 积分明细 -->
		<view class="integral-detail">
			<view class="number-box">
				<image src="/packageMemberIntegral/pack/static/images/icon/integral-detail-bg1.png" class="bg1"></image>
				<image src="/packageMemberIntegral/static/images/icon/integral-detail-bg2.png" class="bg2"></image>
				<view class="my-integral">
					<view class="number">{{userInfo.score}}</view>
					<view class="text">{{i18n.integral}}</view>
				</view>
				<view class="explain" @tap="clikcPop">{{i18n.integralStrategy}}</view>
			</view>
			<view class="detail-list">
				<view class="item" v-for="(item, logId) in scoreDetails" :key="logId">
					<view class="text-box">
						<!-- source来源 0注册送积分 1. 购物 2.会员等级提升加积分 3.签到加积分 4购物抵扣使用积分 5积分过期 6充值获赠 -->
						<!-- ioType出入类型 0=支出 1=收入 -->
						<view class="tit" v-if="item.source == 0">{{i18n.registerEarnPoints}}</view>
						<view class="tit" v-if="item.source == 1 && item.ioType == 1">{{i18n.rewardPointsGoods}}</view>
						<view class="tit" v-if="item.source == 1 && item.ioType == 0">{{i18n.refundShopping}}</view>
						<view class="tit" v-if="item.source == 2">{{i18n.pointsLevelPromotion}}</view>
						<view class="tit" v-if="item.source == 3">{{i18n.signGetPoints}}</view>
						<view class="tit" v-if="item.source == 4 && item.ioType == 1">{{i18n.refundGoodsPoints}}</view>
						<view class="tit" v-if="item.source == 4 && item.ioType == 0">{{i18n.purchaseGoodsPoints}}
						</view>
						<view class="tit" v-if="item.source == 5">{{i18n.pointsExpired}}</view>
						<view class="tit" v-if="item.source == 6">{{i18n.rechargeGetPoints}}</view>
						<view class="tit" v-if="item.source == 7">{{i18n.platformModification}}</view>
						<view class="time">{{item.createTime}}</view>
					</view>
					<view :class="'score ' + (item.ioType == 0 ? 'reduce':'add')">
						{{item.ioType == 0 ? "-":"+"}}{{item.score}}
					</view>
				</view>
			</view>
			<view class="loadall" v-if="scoreDetails.length > 10 && isAll">{{i18n.endTips}}</view>
			<view class="empty" v-if="!scoreDetails.length">{{i18n.noDetails}}</view>
		</view>

		<!-- 积分攻略弹框 -->
		<view class="score-strategy" v-if="showPop">
			<view class="mask"></view>
			<view class="explain-card">
				<view class="content-wrap">
					<view class="cont-title">{{i18n.integralStrategy}}</view>
					<image class="close-icon" @tap="clikcPop" src="/static/images/icon/close.png"></image>
					<view class="cont-det">
						<view class="cont-det-text" v-html="scoreExplain.paramValue"></view>
					</view>
				</view>
			</view>
		</view>
		<!-- /积分攻略弹框 -->

		<!-- /积分明细 -->
	</view>
</template>

<script>
	// pages/integralDetail/integralDetail.js
	var http = require("../../../utils/http.js");

	export default {
		data() {
			return {
				pages: 0,
				current: 1,
				size: 20,
				scoreDetails: [],
				//积分明细列表
				isAll: false,
				userInfo: {},
				//用户积分等级信息
				scoreExplain: {},
				//积分说明
				showPop: false, //攻略弹框显隐
			};
		},

		components: {},
		props: {},

		computed: {
			i18n() {
				return this.$t('index')
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			//请求积分明细
			this.getScoreDetails(); //获取用户积分等级信息

			this.getUserScore(); //积分攻略

			this.getScoreExplain();
		},

		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {},

		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},

		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},

		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {
			this.getNextPage();
		},

		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {
			/**
			 * 获取用户积分等级信息
			 */
			getUserScore: function() {
				var param = {
					url: '/p/user/userInfo',
					method: 'GET',
					data: {
						current: this.current,
						size: this.size
					},
					callBack: res => {
						this.setData({
							userInfo: res
						});
					}
				};
				http.request(param);
			},

			/**
			 * 请求积分明细
			 */
			getScoreDetails: function() {
				uni.showLoading();
				var param = {
					url: '/p/score/page',
					method: 'GET',
					data: {
						current: this.current,
						size: this.size
					},
					callBack: res => {
						uni.hideLoading()
						var scoreDetails = [];

						if (this.current == 1) {
							this.setData({
								scoreDetails: res.records,
								pages: res.pages,
								current: res.current
							});
						} else {
							scoreDetails = this.scoreDetails;
							scoreDetails.push(...res.records);
							this.setData({
								scoreDetails
							});
						}

						console.log(this.scoreDetails);
					}
				};
				http.request(param);
			},

			/**
			 * 触底加载下一页
			 */
			getNextPage() {
				if (this.pages > this.current) {
					this.setData({
						current: this.current + 1
					});
					this.getScoreDetails();
				} else {
					this.setData({
						isAll: true
					});
				}
			},

			/**
			 * 积分攻略
			 */
			getScoreExplain: function() {
				var param = {
					url: '/p/score/getScoreQuestion',
					method: 'GET',
					data: {},
					callBack: res => {
						this.setData({
							scoreExplain: res
						});
						console.log(this.scoreExplain);
					}
				};
				http.request(param);
			},

			/**
			 * 积分攻略弹框显隐
			 */
			clikcPop: function() {
				var showPop = !this.showPop;
				this.setData({
					showPop
				});
			}
		}
	};
</script>
<style lang="scss">
	/* 积分明细 */

	.integral-detail-wrapper {
		.integral-detail {
			position: relative;

			.number-box {
				width: 750rpx;
				height: 446rpx;
				position: relative;
				color: #fff;

				.bg1 {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
				}

				.bg2 {
					position: absolute;
					top: 50rpx;
					left: 225rpx;
					width: 300rpx;
					height: 300rpx;
				}

				.my-integral {
					position: relative;
					text-align: center;
					width: 300rpx;
					margin: auto;
					padding-top: 146rpx;

					.number {
						font-size: 60rpx;
					}

					.text {
						font-size: 30rpx;
					}
				}

				.explain {
					position: absolute;
					right: 0;
					top: 30rpx;
					padding: 8rpx 16rpx 8rpx 20rpx;
					border-radius: 30rpx 0 0 30rpx;
					background: rgba(0, 0, 0, .2);
					color: #fff;
					font-size: 24rpx;
				}
			}

			.empty {
				display: block;
				width: 100%;
				height: 200rpx;
				line-height: 200rpx;
				font-size: 28rpx;
				color: #888;
				text-align: center;
			}

			.detail-list {
				padding: 0 30rpx;
				margin-top: 30rpx;

				.item {
					display: flex;
					padding: 30rpx 0;
					border-bottom: 1px solid #eee;

					&:last-child {
						border: 0;
					}

					.text-box {
						flex: 1;
						margin-right: 30rpx;

						.tit {
							font-size: 28rpx;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.time {
							font-size: 24rpx;
							color: #999;
							margin-top: 10rpx;
						}
					}

					.score {
						font-size: 36rpx;
						margin-top: 4rpx;
						font-family: arial;

						&.add {
							color: #e43130;
						}
					}
				}
			}
		}

		/* 积分明细 end */


		/* 积分攻略弹框 */

		.score-strategy {
			display: block;
			z-index: 999;


			.mask {
				position: fixed;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				background: #000;
				opacity: .4;
				z-index: 1;
			}

			.explain-card {
				position: fixed;
				width: 70%;
				height: 50%;
				top: 50%;
				left: 50%;
				transform: translateX(-50%) translateY(-50%);
				background: #fff;
				border-radius: 6rpx;
				padding: 20rpx;
				z-index: 2;


				.content-wrap {
					height: 100%;


					.close-icon {
						position: absolute;
						top: 20rpx;
						right: 20rpx;
						width: 36rpx;
						height: 36rpx;
					}

					.cont-title {
						display: block;
						font-size: 30rpx;
						font-weight: 600;
						text-align: center;
						margin-bottom: 20rpx;
					}

					.cont-det {
						display: block;
						font-size: 28rpx;
						color: #555;
						max-height: 92%;
						padding-bottom: 40rpx;
						box-sizing: border-box;
						overflow: scroll;
					}
				}
			}
		}

		/* /积分攻略弹框 */



		/* 加载完成 */
		.loadall {
			margin: 30rpx 0;
			line-height: 2em;
			font-size: 28rpx;
			color: #aaa;
			text-align: center;
		}
	}
</style>
